<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@12.2.0/dist/markdown-it.min.js"></script>

<div id="markdownbox"></div>
<script>
  var md = window.markdownit({
    //默认为 language-, 但要完整适配highlight.js, 还应该加一个 hljs
    // langPrefix:   'hljs language-',  // CSS language prefix for fenced blocks. Can be
                                     // useful for external highlighters.
    highlight: function (str, lang) {
      console.log('str:',str);
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(str, { language: lang }).value;
        } catch (__) {}
      }

      return ''; // use external default escaping
    },
    //Or with full wrapper override (if you need assign class to <pre>):
    /*highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          //todo emmm 这个是官方给的例子, 但highlight.js hljs这个类名 其实不是加在pre上的, 而是加在<code>上的, so, 用上面的写法即可
          return '<pre class="hljs"><code>' +
            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
            '</code></pre>';
        } catch (__) {}
      }

      return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }*/

  });

  //Apply syntax highlighting to fenced code blocks with the highlight option:
  /*
    fenced blocks 是指 markdown里的这种语法:
    ```
    Sample text here...
    ```
  */

  const text =
`# markdown-it rulezz!
\`\`\`js
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
\`\`\`
`

  var result = md.render(text);

  console.log('result:',result);
  markdownbox.innerHTML = result;
  //todo
</script>
</body>
</html>
